<template>
  <view class="page-container">
    <custom-nav-bar v-if="useNav" :title="title" :showBack="showBack" :autoBack="autoBack" :border="navBorder"
      :backgroundColor="navBackgroundColor" :color="navColor" :fallbackTabUrl="fallbackTabUrl"
      @goBack="$emit('goBack')">
      <template v-slot:left>
        <slot name="nav-left" />
      </template>
      <template v-slot:right>
        <slot name="nav-right" />
      </template>
    </custom-nav-bar>
    <!-- :style="{ paddingTop: bodyPaddingTop }" -->
    <view class="page-body">
      <slot />
    </view>
  </view>
</template>

<script>
import CustomNavBar from '@/components/CustomNavBar.vue'
export default {
  name: 'PageContainer',
  components: {
    CustomNavBar
  },
  props: {
    title: { type: String, default: '' },
    useNav: { type: Boolean, default: true },
    showBack: { type: Boolean, default: true },
    autoBack: { type: Boolean, default: true },
    navBorder: { type: Boolean, default: false },
    navBackgroundColor: { type: String, default: '#333333' },
    navColor: { type: String, default: '#d4af37' },
    fallbackTabUrl: { type: String, default: '/pages/home/index' },
    extraTop: { type: Number, default: 0 }
  },
  data() {
    return {
      navHeight: 44,
      statusBarHeight: 0
    }
  },
  computed: {
    bodyPaddingTop() {
      if (!this.useNav) return '0px';
      // #ifdef MP-WEIXIN
      // 小程序模式下，动态计算导航栏高度
      return (this.navHeight + this.statusBarHeight + this.extraTop) + 'px';
      // #endif
      
      // #ifndef MP-WEIXIN
      // 其他平台使用固定值
      return (48 + this.extraTop) + 'px';
      // #endif
    }
  },
  mounted() {
    try {
      const info = uni.getSystemInfoSync();
      this.statusBarHeight = info.statusBarHeight || 0;
    } catch (e) { }
  }
}
</script>

<style scoped lang="scss">
.page-container {
  width: 100%;
  min-height: 100vh;
  position: relative;
}

.page-body {
  width: 100%;
  min-height: calc(100vh - 88rpx);
  box-sizing: border-box;
  background-color: transparent;
  position: relative;
  // #ifdef MP-WEIXIN
  padding-top: v-bind(bodyPaddingTop);
  /* #endif */
}
</style>
